(() => {
  let cpnName = "testCpn";

  window[cpnName] = Vue.extend({
    // el:'',//不可以写el,因为最终都是为vm实例对象选择的容器服务
    // 模板代码
    template: `
    <div>
      <h4>我是组件{{index + 1}}, 我的值：{{item.val}}</h4>
      <button @click="sub(step)">我是按钮 -1</button>
      <button @click="add(step)">我是按钮 +1</button>
    </div>
  `,
    props: {
      item: Object,
      step: Number,
      index: String,
    },
    data() {
      return {};
    },
    methods: {
      add() {
        this.emitInfo("change", this.item.val + this.step);
      },
      sub() {
        this.emitInfo("change", this.item.val - this.step);
      },

      emitInfo(name, val) {
        // console.log(...arguments);

        // 这里 emit 的名称不能是驼峰，只能是全小写。[根据这里的经验](https://blog.csdn.net/qq_35260672/article/details/130881441)
        this.$emit(name, val);
      },
    },
  });
})();
